<template>
  <div>
    <h1>reactive页面</h1>
    <h1>姓名：{{person.name}}</h1>
    <h1>年龄：{{person.age}}</h1>
    <h1>类型：{{person.type}}</h1>
    <h1>lastname:{{person.arr.lastname}}</h1>
    <h1>数组{{person.arr.shuzu}}</h1>
    <button @click="handlechange">改</button>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  setup () {
    let person =reactive({
      name:'张三',
      age:15,
      type:'前端',
      arr:{
        lastname:'李四',
        shuzu:[1,2,3,4,5,6,7]
      }
    })
    function handlechange(){
      person.name='李四'
      person.arr.lastname='王五'
      person.arr.shuzu[3]=10000
    }
    return {
      person,
      handlechange
    }
  }
}
</script>

<style lang="less" scoped>

</style>